<template>
  <div>
    <div class="boxClass">
      <h1 class="titleClass">申请人情况:</h1>
      <el-form :inline="true" label-width="90px" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="抵押人:" prop="mortgagor">
              <el-input v-model="form.mortgagor" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号:" prop="mortgagorCard">
              <el-input v-model="form.mortgagorCard" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码:" prop="mortgagorTel">
              <el-input v-model="form.mortgagorTel" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="" prop="choiceMortgagor">
              <el-radio-group v-model="form.choiceMortgagor">
                <el-radio :label="1" v-if="Witch">同抵押人</el-radio>
                <el-radio :label="0" v-if="componentWwitch"
                >不同抵押人
                </el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="componentWwitch">
            <el-form-item label="债务人:" prop="debtor">
              <el-input v-model="form.debtor" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="componentWwitch">
            <el-form-item label="身份证号:" prop="debtorCard">
              <el-input v-model="form.debtorCard" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="componentWwitch">
            <el-form-item label="手机号码:" prop="debtorTel">
              <el-input v-model="form.debtorTel" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h1 class="indexClass">
              主债权合同/抵押合同编号 : （新华普惠·<span>{{ productText }}</span>）反担保
              <input type="text" class="inputClass1" v-model="word" />字
              第<input type="text" class="inputClass1" v-model="number" />号
            </h1>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="boxClass">
      <h1 class="titleClass">不动产情况:</h1>
      <el-form :inline="true" label-width="120px" ref="estateForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="房屋坐落:" prop="site">
              <!--              <el-input v-model="form.site" class="inputEl"></el-input>-->
              <el-input type="textarea" v-model="form.site" class="inputEl"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不动产权证号:" prop="cnm">
              <!--              <el-input v-model="form.cnm" class="inputEl"></el-input>-->
              <el-input type="textarea" v-model="form.cnm" class="inputEl"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不动产单元号:" prop="unit">
              <!--              <el-input-->
              <!--                v-model="form.unit"-->
              <!--                class="inputEl"-->
              <!--                placeholder="请输入不动产单元号"-->
              <!--              ></el-input>-->
              <el-input type="textarea" v-model="form.unit" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建筑面积:" prop="area">
              <input type="text" class="inputClass1 inputClass2" v-model="form.area" />㎡
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="抵押物清单:" prop="collateralList">
              <el-radio-group v-model="form.collateralList">
                <el-radio :label="1">需要</el-radio>
                <el-radio :label="0">不需要</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="indexBox">
      <el-button type="primary" @click="downloadForm">下载</el-button>
    </div>
  </div>
</template>

<script>
import {
  mortgageRYD,
  mortgageLYB,
  mortgageLYF,
  mortgageDBAJF,
  getOrderTable
} from "../../assets/js/api";

export default {
  props: ["isContract", "orderData","showForm"],

  data() {
    return {
      form: {
        area: "", //建筑面积!
        unit: "", //不动产单元号!
        cnm: "", //不动产证号!
        mortgagorTel: "", //抵押人手机号码!
        mortgagorCard: "", //抵押人身份证号码!
        mortgagor: "", //抵押人!
        site: "", //房屋坐落位置!
        debtorTel: "", //债务人手机号!
        debtorCard: "", //债务人身份证号码!
        debtor: "", //债务人姓名!
        choiceMortgagor: 1, //同抵押人或者不同抵押人状态码选择!
        collateralList: 1 //抵押物清单!
      },
      // area: "",
      word: "",
      number: "",
      Witch: null,
      componentWwitch: true,
      productText: "永川北银"
    };
  },
  created() {
    this.getUserInfo();

    if (this.showForm.productType == 25) {
      this.productText = "大渡口融兴";
    } else if (this.isContract == 2) {
      this.productText = "永川北银";
    }
    this.form.productType=this.showForm.productType;

  },
  methods: {
    // 获取订单信息详情!
    getUserInfo() {
      getOrderTable(this.orderData).then((res) => {
        this.form.unit = res.data.estateUnit; //不动产单元号!
        this.form.site = res.data.pledgeHouseAddress; //房屋坐落!
        this.form.cnm = res.data.pledgeHouseNumber; //产权证号!
        this.form.area = res.data.pledgeHouseArea; //建筑面积!
        this.form.debtorCard = res.data.basicBorrowerCard; //债务人身份证号码!
        this.form.debtorTel = res.data.basicBorrowerPhone; //债务人手机号码!
        this.form.debtor = res.data.basicBorrowerName; //债务人!
        if (res.data.pledgeMateName && res.data.pledgeName) {
          this.form.mortgagor = `${res.data.pledgeName}、${res.data.pledgeMateName}`;
          this.form.mortgagorCard = `${res.data.pledgeCard}、${res.data.pledgeMateCard}`;
          if (res.data.pledgePhone && res.data.pledgeMatePhone) {
            this.form.mortgagorTel = `${res.data.pledgePhone}、${res.data.pledgeMatePhone}`;
          } else if (res.data.pledgePhone) {
            this.form.mortgagorTel = res.data.pledgePhone;
          } else {
            this.form.mortgagorTel = res.data.pledgeMatePhone;
          }
        } else {
          this.form.mortgagorCard = res.data.pledgeCard; //抵押人身份证号!
          this.form.mortgagor = res.data.pledgeName; //抵押人!
          this.form.mortgagorTel = res.data.pledgePhone; //抵押人手机号码!
        }
        if (this.form.mortgagor == this.form.debtor) {
          this.componentWwitch = false;
          this.Witch = true;
          this.form.choiceMortgagor = 1;
        } else {
          this.componentWwitch = true;
          this.Witch = false;
          this.form.choiceMortgagor = 0;
        }

        //拼接第二套信息
        if (res.data.pledgeHouseAddressTwo) {
          this.form.site = this.form.site + "," + res.data.pledgeHouseAddressTwo;
        }
        if (res.data.pledgeHouseNumberTwo) {
          this.form.cnm = this.form.cnm + "," + res.data.pledgeHouseNumberTwo;
        }
        if (res.data.pledgeHouseAreaTwo) {
          this.form.area = this.form.area + "," + res.data.pledgeHouseAreaTwo;
        }
        if (res.data.estateUnitTwo) {
          this.form.unit = this.form.unit + "," + res.data.estateUnitTwo;
        }

      });
    },
    // 下载按钮!
    downloadForm() {
      if (
        this.isContract == 1 ||
        this.isContract == 3 ||
        this.isContract == 4
      ) {
        this.form.contractNumber = `不动产(新华普惠·重庆银行)${this.word}字${this.number}号/不动产（新华普惠·重庆银行)反担保${this.word}字第${this.number}号`;
        // this.form.area = `${this.area}㎡`;
        if (this.isContract == 1) {
          mortgageLYB(this.form).then((res) => {
            window.location = res;
            // window.open(res);
          });
        }
        if (this.isContract == 3) {
          mortgageLYF(this.form).then((res) => {
            // window.open(res);
            window.location = res;
          });
        }
        if (this.isContract == 4) {
          mortgageDBAJF(this.form).then((res) => {
            // window.open(res);
            window.location = res;
          });
        }
        this.$refs["form"].resetFields();
        this.$refs["estateForm"].resetFields();
      }

      if (this.showForm.productType == 25) {
        this.form.contractNumber = `不动产（新华普惠·大渡口融兴）${this.word}字${this.number}号/不动产反担保（新华普惠·大渡口融兴）${this.word}字第${this.number}号`;
        // this.form.area = `${this.area}㎡`;

      } else if (this.isContract == 2) {
        this.form.contractNumber = `不动产(新华普惠·永川北银)${this.word}字${this.number}号/不动产（新华普惠·永川北银)反担保${this.word}字第${this.number}号`;
        // this.form.area = `${this.area}㎡`;
      }
      mortgageRYD(this.form).then((res) => {
        // window.open(res);
        window.location = res;
      });
      this.$refs["form"].resetFields();
      this.$refs["estateForm"].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.boxClass {
  margin-bottom: 20px;
  width: 100%;
  border: 2px solid #ccc;
}

.indexClass {
  margin-left: 20px;
  margin-bottom: 20px;
}

.inputClass1 {
  border-radius: 4px;
  height: 35px;
  line-height: 35px;
  width: 60px;
  color: #606266;
  border: 1px solid #dcdfe6;
  text-align: center;
}

.inputClass2 {

  width: 120px;
}

.titleClass {
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}

.indexBox {
  text-align: center;
}

/deep/ .inputEl {
  width: 165%;
}
</style>